<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#layout {
	background-color: #3F3;
	margin: auto;
	height: 100px;
	width: 80%;
}
body {
	margin: 0px;
}
#main {
	background-color: #3FF;
	width: 80%;
	height: 100px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
	white-space: normal;
	word-spacing: normal;
	word-wrap: break-word;
	white space:no-wrap ;
	overflow:hidden;
	text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
#foot {
	background-color: #CFC;
	margin: auto;
	height: 100px;
	width: 80%;
}
</style>
<script language="javascript">
function fn1(){
	var d1 = document.getElementById("layout").style.left;
	document.write(d1);
}
</script>
</head>

<body>
<div id="layout">此处显示  id "layout" 的内vvvvvvvvvvvvvvvvvvv容vvvvvvvvvvvvvvvvvvvv</div>

<div id="main" class="text-overflow">
<span>新浪科技讯 5月10日晚间消息，阿里巴巴董事局主席马云今晚在“淘宝十周年”晚会上发表演讲，并将正式卸任集团CEO一职。马云说，10年之间，淘宝能成功、电子商务在中国能成功，是因为人与人之间建立起了信任关系。他也感谢10年来团队给他的信任，也相信新时代是年轻人的时代，希望大家像支持他一样支持继任者陆兆禧及其新团队。</span></div>

<div id="foot"  class="text-overflow">
<span>新浪科技讯 5月10日晚间消息，阿里巴巴董事局主禧及其新团队。</span>
</div>
</body>
</html>
